﻿
/*slick.css*/
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }
.slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { opacity: .75; color: black; }



body{opacity:0; transition:all 0.2s ease-in-out; overflow-x:hidden}
.bodyIn{ opacity:1;}
body.ieBody{opacity:1;}
.ieBody .wOpacity{opacity:1;}
.serBg{ background:rgba(1,87,206,0.95); position:fixed; left:0; top:0; width:100%; height:100%; z-index:55;}
.serLayer{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:56; padding-top:120px;}
.serClose{ background: url(../images/close-1.png) no-repeat center center; display: inline-block; height: 72px; width: 72px; border: 1px solid rgba(255,255,255,0.3); position: absolute; right: 3vw; top: 28px; border-radius:50%; transition:all 0.5s ease-in-out; }
.serClose.on{ transform:rotate(90deg);}
.serIntBox{ margin: 0px 3vw; }
.serIntBox input{ border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); font-size: 48px; line-height: 158px; color: #FFF; height: 160px; background: url(../images/ser_icon.png) no-repeat left center; padding-left: 75px; width:100%;}
.serul{padding:50px 3vw;}
.serul li{ font-size: 16px; line-height: 32px; color: #FFF; padding-left:18px; position:relative; }
.serul li:after{content:""; width:5px; height:5px; background:#fff; border-radius:50%; position:absolute; left:0; top:15px;}
@media (max-width:1799px){
.serClose{height: 60px; width: 60px;}
.serIntBox input{height:96px; font-size:30px;}
}
@media (max-width:993px){
.serBg{z-index:889;}
.serLayer{z-index:900;}
.serClose{ transform:scale(0.8);}
.serIntBox input{line-height:88px; height:88px; background-size:22px auto; padding-left:42px; font-size:18px;}
.serul{padding:20px 3vw;}

}


@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
@keyframes rotate2{
from{transform: rotate(360deg)}
to{transform: rotate(0deg)}
}
@keyframes mouseIcon {  0% {
 top:7px;
 opacity:1;
}
 80% {
 top:9px;
 opacity:1;
}
 100% {
 top:9px;
 opacity:0.1;
}
}
@keyframes hmc2bg {
0% {
 opacity:1;
 transform:scale(0.96); transform-origin:center bottom;
}
 50% {
 opacity:0.7;
 transform:scale(1.02); transform-origin:center bottom;
}
 100% {
 opacity:1;
 transform:scale(0.96); transform-origin:center bottom;
}
}

#hmDoc{position:fixed; right:60px; top:50%; transform:translateY(-50%); z-index:50;}
#hmDoc ul li{ line-height: 24px; height: 24px; width: 24px; position: relative; margin: 2px 0px; }
#hmDoc ul li a span{ transition:all 0.5s ease-in-out; opacity:0; display:inline-block; white-space:nowrap; position:absolute; right:31px; line-height:24px; height:24px; top:0; color:#fff; font-size:16px;}
#hmDoc ul li a.on span{opacity:1;}
#hmDoc ul li a:before{ content: ""; display: inline-block; height: 6px; width: 6px; position: absolute; top:9px; left: 9px; background:#888988; border-radius:50%; transition:all 0.5s ease-in-out;}
#hmDoc ul li a.on:before{ opacity:0}
#hmDoc ul li a:after{ content: ""; background: url(../images/inx_si.png) no-repeat center center; display: inline-block; position: absolute; height: 20px; width: 20px; left: 2px; top: 2px; transition:all 0.5s ease-in-out; opacity:0; transform:rotate(-360deg); }
#hmDoc ul li a.on:after{ opacity:1; transform:rotate(0deg)}
@media (max-width:1799px){
#hmDoc{right:30px; padding-top:80px;}
}
@media (max-width:1199px){
#hmDoc ul li a span{display:none!important;}
#hmDoc{right:2px;}
}
@media (max-width:767px){
#hmDoc{right:0px; transform:scale(0.8) translateY(-50%);}
}
